<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/utils/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/utils/common.css" />
	<title></title>
	<style>
		.list-li {
			margin-top: 10px;
			padding: 10px 20px;
			background-color: #11b5ab;
			border-radius: 10px;
		}
		.media-body {
			vertical-align: middle;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="btn-group btn-group-justified btn-tab" role="group" aria-label="button-group">
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel1" class="btn btn-default active">准客户</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel2" class="btn btn-default">潜在合伙人</button>
			</div>
			<div class="btn-group" role="group">
				<button type="button" panel-data="tab-panel3" class="btn btn-default">普通客户</button>
			</div>
		</div>
		<div class="tab-content">
			<div id="tab-panel1" class="tab-pane active">
				<ul class="list-ul">
					<!--<li class="list-li">
					    <div class="media-left">
					      	<a href="#">
					        	<img class="border-radius-40" class="media-object" src="../../img/headimg.jpg" alt="用户头像">
					      	</a>
					    </div>
					    <div class="media-body">
					    	<span style="margin-right: 20px;">刘刚</span><span style="margin-right: 20px;">男</span><span>贵州贵阳</span>
					    </div>
					</li>-->
				</ul>
				<nav id="page1" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
			<div id="tab-panel2" class="tab-pane">
				<ul class="list-ul">
					<!--<li class="list-li">
					    <div class="media-left">
					      	<a href="#">
					        	<img class="border-radius-40" class="media-object" src="../../img/headimg.jpg" alt="用户头像">
					      	</a>
					    </div>
					    <div class="media-body">
					    	<span style="margin-right: 20px;">刘刚</span><span style="margin-right: 20px;">男</span><span>贵州贵阳</span>
					    </div>
					</li>-->
				</ul>
				<nav id="page2" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
			<div id="tab-panel3" class="tab-pane">
				<ul class="list-ul">
					<!--<li class="list-li">
					    <div class="media-left">
					      	<a href="#">
					        	<img class="border-radius-40" class="media-object" src="../../img/headimg.jpg" alt="用户头像">
					      	</a>
					    </div>
					    <div class="media-body">
					    	<span style="margin-right: 20px;">刘刚</span><span style="margin-right: 20px;">男</span><span>贵州贵阳</span>
					    </div>
					</li>-->
				</ul>
				<nav id="page3" class="text-center" aria-label="Page navigation">
					<ul class="pagination">
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/bootstrap.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery.cookie.js" ></script>
	<script type="text/javascript" src="../../js/utils/page.js" ></script>
	<script type="text/javascript" src="../../js/utils/boot.js" ></script>
	<script>
		var userID = $.cookie("userID");
		var companyID = $.cookie("companyID");
		var pageNo=1,tempType=1;
		$(function() {			
			getFamiliarCustomerList();
		})
		$(".btn-tab").on("click", "button", function(){
			$(".btn-tab button").removeClass("active");
			$(this).addClass("active");
			var panelId = $(this).attr("panel-data");
			$(".tab-content .tab-pane").removeClass("active");
			$("#"+panelId).addClass("active");
			pageNo=1;
			if (panelId == "tab-panel1") {
				tempType=1;
				getFamiliarCustomerList();
			}else if (panelId == "tab-panel2") {
				tempType=2;
				getFamiliarCustomerList();
			}else if (panelId == "tab-panel3") {
				tempType=3;
				getFamiliarCustomerList();
			}
		});
		function getFamiliarCustomerList() {
			var data = {
				type:tempType, // 1、熟悉客户 2、认识客户 3、线索客户
				userID:userID,
				pageNo:pageNo,
				companyID:companyID
			}
			base.postData(base.url.familiarCustomerList, data, callbackGetFamiliarList);
		}
		function callbackGetFamiliarList(data) {
			if (data.success) {
				var html = '';
				for (var i=0; i < data.context.familiarCustomerList.length; i++) {
					html += pingCustomerImpact(data.context.familiarCustomerList[i]);
				}
				$("#tab-panel"+tempType+" .list-ul").html(html);
				if (pageNo == 1) {
					//初始化分页
					var totalPage = Math.ceil(data.context.totalPage/10);
					var page = {
						pageIndex:1,//初始页数
						currentPage:1,//当前页
						showPage:5,//显示页数
						totalPage:totalPage,//总页数
						onPageClick: function(page) {
							$("#page"+tempType).initPage(page);
							pageNo = page.currentPage;
							getFamiliarCustomerList();
			    			return false;  //默认的翻页事件
					    }
					};
					$("#page"+tempType).initPage(page);
				}
			}
		}
		function pingCustomerImpact(data) {
			var sex = "未知";
			if (data.sex == 1) {
				sex = "男";
			}else if (data.sex == 2) {
				sex = "女";
			}
			var html = '<li class="list-li">'+
						'	<input type="hidden" name="customerID" value="'+data.customerID+'" />'+
						'    <div class="media-left">'+
						'      	<a href="#">'+
						'        	<img class="border-radius-40" class="media-object" src="'+data.headImgUrl+'" alt="用户头像">'+
						'      	</a>'+
						'    </div>'+
						'    <div class="media-body">'+
						'    	<span style="margin-right: 20px;">'+data.nickName+'</span><span style="margin-right: 20px;">'+sex+'</span><span>'+data.area+'</span>'+
						'    </div>'+
						'</li>';
			return html;			
		}
		$('div[id^="tab-panel"]  .list-ul').on("click", ".list-li", function(){
			var customerID = $(this).find("input[name='customerID']").val();
			window.parent.location = "../index.html?path=myClient/clientDetailsPhone.html?customerID="+customerID;
		});
	</script>	
</body>
</html>
